
// .session>.add
const sessionAddListener = {
    handleEvent(e){
        console.log( e.target );
        console.log( Object.getOwnPropertyNames( sessionStorage.__proto__ ) );
        sessionStorage.setItem( 'name' , '王阿姨' );
        sessionStorage.setItem( 'gender' , '靓仔' );
        alert( '添加成功' );
    }
}

// .session>.query
const sessionQueryListener = {
    handleEvent(e){
        let n = sessionStorage.length ;
        for( let i = 0 ; i < n ; i++ ) {
            let key = sessionStorage.key( i );
            let value = sessionStorage.getItem( key );
            console.log( `${key}:${value}` );
        }
    }
}

// .local>.add
const localAddListener = {
    handleEvent(e){
        console.log( e.target );
        console.log( Object.getOwnPropertyNames( localStorage.__proto__ ) );
        localStorage.setItem( 'name' , '王阿姨' );
        localStorage.setItem( 'gender' , '靓仔' );
        alert( '添加成功' );
    }
}

// .local>.query
const localQueryListener = {
    handleEvent(e){
        let n = localStorage.length ;
        for( let i = 0 ; i < n ; i++ ) {
            let key = localStorage.key( i );
            let value = localStorage.getItem( key );
            console.log( `${key}:${value}` );
        }
    }
}

const loadListener = {
    handleEvent(){
        const sessionAddBtn = document.querySelector('.session>.add');
        sessionAddBtn.addEventListener( 'click' , sessionAddListener , false );

        const sessionQueryBtn = document.querySelector('.session>.query');
        sessionQueryBtn.addEventListener( 'click' , sessionQueryListener , false );

        const localAddBtn = document.querySelector('.local>.add');
        localAddBtn.addEventListener( 'click' , localAddListener , false );

        const localQueryBtn = document.querySelector('.local>.query');
        localQueryBtn.addEventListener( 'click' , localQueryListener , false );
    }
}

// 监听 window 对象的  load 事件
window.addEventListener( 'load' , loadListener , false );